<template>
<!-- 一篇新的博客内容的发表组件 -->
  <div class="new-article">
      <!-- <el-row class="article-h3">
        <h3>发表文章</h3>
      </el-row> -->
      <el-row>
        <el-form :model="contentForm" :rules="rules" ref="contentForm" class="content-form">
            <el-row>
                <el-form-item label="标题" prop="articleTitle" label-width="100px">
                    <el-input v-model="contentForm.articleTitle" placeholder="请输入标题"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="description" label-width="100px">
                    <el-input v-model="contentForm.description" placeholder="请输入简介内容"></el-input>
                </el-form-item>
                <el-form-item label="发布日期" prop="articleDate" label-width="100px">
                    <el-date-picker type="date" placeholder="选择日期" v-model="contentForm.articleDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-row>
            <div>
                <el-form-item>
                    <h3>文章主体内容</h3>
                    <editor :value='contentForm.articleContent' @listenToChildEvent="showMsgFromChild" ref="content" ></editor>
                </el-form-item>
            </div>
            <el-row>
                <el-form-item label-width="100px">
                    <el-button type="primary" @click="submitForm('contentForm')">提交</el-button>
                    <el-button >重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>
      </el-row>
  </div>
</template>

<script>

import { addArticle, getArticle } from '../../api/article'
import Editor from '../public/Editor'
// import {Debounce, Throttle} from '../utils/func'  // 函数防抖

export default {
    name: 'NewArticle',
    watch: {
        query: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        // 返回数据
        return {
            articleEditor: false,
            contentForm:{
                articleTitle: '',
                description: '',
                articleDate: '',
                articleContent: '',
            },
            rules: {
                articleTitle: [
                    {
                        require: true, message: '请输入标题', trigger: 'blur'
                    }
                ],
                description: [
                    {
                        require: true, message: '请输入描述', trigger: 'blur'
                    }
                ],
                articleDate: [
                    {
                        require: true, message: '请选择日期', trigger: 'blur'
                    }
                ],
                articleContent: [
                    {
                        require: true, message: '请输入内容', trigger: 'blur'
                    }
                ]
            }
        }
    },
    created() {
        this.$nextTick(() => {
            // 处理重新编辑文章中的换行用``
            let data = this.contentForm.articleContent.replaceAll(/\\n/g,`
`).replaceAll("\\/","/").replaceAll("\\/","/").replaceAll("\\\"","\"")
            console.log(data)
            this.$refs.content.content = data
        })
    },
    mounted() {
    },
    methods: {
        showMsgFromChild(data){
            this.contentForm.articleContent = data;
            // console.log('数据:',this.contentForm.articleContent)
        },
        submitForm: function(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    // console.log('表单提交的数据', that.contentForm.articleTitle)
                    // console.log(this.conten)
                    // let formdata = new FormData();
                    // formdata.append('data',JSON.stringify(this.contentForm))
                    if(!this.articleEditor){
                        console.log(this.articleEditor)
                        addArticle(this.contentForm).then(res => {
                            if(res.code != 200){
                                console.log('数据上传成功')
                                resetForm(formName)
                            }
                        })
                    }else{
                        this.$confirm('请确认是否提交修改？', '确认信息', {
                            distinguishCancelAndClose: true,
                            confirmButtonText: '确认',
                            cancelButtonText: '放弃修改'
                            })
                            .then(() => {
                                this.articleEditor = false
                                console.log('更新')
                                console.log(this.articleEditor)
                                addArticle(formdata).then(res => {
                                    if(res.code != 200){
                                        console.log('数据上传成功')
                                    }
                                });
                                this.$message({
                                type: 'info',
                                message: '保存修改'
                                });
                            })
                            .catch(action => {
                                this.$message({
                                type: 'info',
                                message: action === 'cancel'
                                    ? '放弃保存并离开页面'
                                    : '停留在当前页面'
                                })
                            });
                        // updateArticle()

                    }
                    
                }
            })

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {

    },
    components: {
        // 导入组件
        Editor
    }
}
</script>

<style scoped>
.el-form{
    width: 100%;

}
.article-h3 {
    display: flex;
    width: 100%;
}
.el-row {
    /* display: flex; */
    height: auto;
}
.el-input,.el-date-picker {
    width: 300px;
}
</style>
